<!-- 产品 -->
<template>
    <div class="view-page">
        <section class="page-hero">
            <div class="product-info">
                <div class="pdp_info">

                    <el-carousel height="500px" :style="carouselSty">
                        <el-carousel-item v-for="(item, index) in productInfo?.productImage || []" :key="index">
                            <div class="pdp_img_box">
                                <img class="pdp_img" :src="item" alt="">
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                    <!-- <img class="pdp_img" :src="productInfo.productImage[0] || ''" alt=""> -->

                    <div class="pdp_data" ref="pdpData">
                        <h1 class="pdp_title">{{ productInfo.name || '' }}</h1>
                        <div class="pdp-content__summary">{{ productInfo.subName || '' }}</div>
                        <div class="pdp-content__description" v-html="productInfo.productFeatures || ''"></div>
                        <!-- <div class="pdp-content__checklist-items">
                        <div class="pdp-content__checklist-item" v-for="(item, index) in productData" :key="index">
                            <img class="pdp-content__checklist-icon" src="../../assets/images/bounty/checkmark-new.webp"
                                alt="">
                            <span>{{ item }}</span>
                        </div>
                    </div> -->
                        <button class="pdp-content__btn" @click="contractCustomerService">Contact Customer
                            Service</button>
                    </div>
                </div>
                <div class="pdp_actions">
                    <div>
                        <el-collapse accordion>
                            <!-- <el-collapse-item title="Description & Benefits" name="1">
                            <div class="pdp-content__benefits" v-html="productInfo.description || ''"></div>
                        </el-collapse-item> -->
                            <el-collapse-item title="Ingredients" name="2">
                                <div class="pdp-content__benefits" v-html="productInfo.productIngredients || ''"></div>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                </div>
            </div>
        </section>
        <section class="description">
            <div class="content">
                <div class="description_title">Description</div>
                <div class="description_content" v-html="productInfo.description || ''"></div>
            </div>
        </section>
        <section class="page-Supports">
            <div class="Supports_title">This Product Supports</div>
            <div class="Supports_content">
                <img class="Supports_img" src="../../assets/images/bounty/herbal-padded.png" alt="">
                <span>Your Wellness Routine</span>
            </div>
        </section>
        <section class="page-products">
            <div class="products_title">Related Products</div>
            <product-list :productArr="productArr"></product-list>
            <div class="product-other">
                <div class="productother_title">Complete Support. Exceptional Quality. Passionate Science. Innovative
                    Solutions. </div>
                <div class="product_info">We are passionate about the science and ingredients in our products to support
                    you and your family </div>
                <div class="product-other__list">
                    <div class="product-item" v-for="(item, index) in productArr2" :key="index">
                        <img class="product-img" :src="item.img" alt="">
                        <span class="product-name">{{ item.name }}</span>
                        <span class="product-description">{{ item.description }}</span>
                    </div>
                </div>

            </div>

        </section>

        <contentBanner />

        <instagram></instagram>
    </div>
</template>

<script>
import productList from "../common/productList.vue";
import instagram from "../instagram/index.vue";
import { selectProductDetail, pageSelectProductList } from "../../config/api.js";
import contentBanner from "@/components/content-banner/index.vue";
export default {
    name: "Product",
    components: {
        productList,
        instagram,
        contentBanner
    },
    data() {
        return {
            carouselSty: { width: "400px" },
            productInfo: {},
            rating: 4.5,
            productData: [
                "Promotes Cardiovascular Health*",
                "Supports Cellular Energy Production*",
                "Helps Replenish What Statin Medications May Deplete^",
                "Contributes to Antioxidant Health*",
                "Coenzyme Q-10 Is a Clinically Studied Ingredient",
            ],
            productArr: [],
            productArr2: [
                {
                    img: require("../../assets/images/bounty/info1.webp"),
                    name: "About Us",
                    description:
                        "Harvest Gain Biotech is headquartered in Denver, Colorado, USA, with its core R&D team hailing from Enshi, China, known as the \"Selenium Capital of the World.\"\n" +
                        "We are committed to advancing immune health through scientific innovation, bringing centuries-old natural health practices from Enshi, China, to the US market.\n",
                },
                {
                    img: require("../../assets/images/bounty/info2.png"),
                    name: "Our Product",
                    description:
                        "Our signature High-Activity Organic Selenium Tablet combines cutting-edge biotechnology and plant-based innovation.\n" +
                        "It helps to:Strengthen the immune system&Support heart and metabolic health&Protect against oxidative stress and premature aging&Maintain balanced energy and vitality\n" +
                        "Selenium is not just nutrition — it is a daily shield for life and longevity.\n",
                },
                {
                    img: require("../../assets/images/bounty/info3.png"),
                    name: "Charity Mission",
                    description:
                        "Through our Love & Health Donation Program, every purchase becomes a gesture of kindness.\n" +
                        "A portion of proceeds and selenium products are donated regularly to churches, nursing homes, and low-income families, ensuring that wellness and compassion reach those in need.\n" +
                        "At Harvest Gain, every act of care multiplies into love.",
                },
                {
                    img: require("../../assets/images/bounty/info4.webp"),
                    name: "Our Vision",
                    description:
                        "Guided by the belief that faith inspires health, and health empowers giving,\n" +
                        "we aim to unite science, wellness, and charity into one meaningful journey.\n" +
                        "Every member’s participation creates a cycle of prosperity, vitality, and compassion —\n" +
                        "a harvest where blessings grow and love endures.",
                },
            ],
        };
    },
    created() {
        const productId = this.$route.query.productId;
        if (productId) {
            this.selectProductDetail(productId);
        }
    },
    mounted() {

    },
    methods: {
        // 联系客服
        contractCustomerService() {
            window.open("https://chatlink.chatslink.net/widget/standalone.html?eid=c14305a3173efaca18c5cadf45e6777a&groupid=bd661ad037363571ba0cb4fe095cb8db&language=en", "_blank");
        },
        // 处理查看产品详情
        selectProductDetail(productId) {
            selectProductDetail(productId).then((res) => {
                if (res.code === 200) {
                    this.productInfo = res.data;
                    if (this.productInfo) {
                        pageSelectProductList({
                            pageNum: 1,
                            pageSize: 10,
                            // categoryId: this.productInfo.categoryId,
                        }).then((productRes) => {
                            this.productArr = productRes.data.records
                                .filter(item => item.id !== productId)
                                .map(
                                    (item) => {
                                        console.log(item.id, productId)
                                        return {
                                            id: item.id,
                                            img: item.productImage[0],
                                            servings: item.subName,
                                            name: item.name,
                                            description: item.productFeatures,
                                        };
                                    }
                                );
                            this.$nextTick(() => {
                                let contentWidth = this.$refs.pdpData.offsetWidth;
                                this.carouselSty = { width: contentWidth + 'px' }
                            })
                        });
                    }
                }
            });
        },
    },
};
</script>
<style scoped lang="less">
.view-page {
    animation: fadeIn 0.3s ease-in-out;
}

@media (min-width: 1680px) {
    .pdp_img {
        max-height: 500px;
        max-width: 500px;
    }
}

@media (max-width: 1200px) {
    .pdp_info {
        flex-direction: column !important;
    }

    .pdp_img {
        width: 100vw;
        max-width: 100vw !important;
    }

    ::v-deep .el-carousel {
        width: 100vw !important;
    }


    .product-info,
    .page-hero {
        max-width: 100vw !important;
        width: 100%;
    }

    .product-info {
        max-width: 100vw !important;
        width: 100%;
    }

    .pdp_data {
        width: 90vw;
    }

    .pdp_title {
        font-size: 50px !important;
    }

    .pdp-content__summary {
        font-size: 40px !important;
        line-height: 60px !important
    }

    .pdp-content__description {
        font-size: 30px !important;
    }

    .pdp-content__btn {
        width: auto !important;
        font-size: 33px !important;
        padding: 16px 40px !important;
    }

}

.page-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 345px;
    padding: 50px 0;

    .product-info {
        max-width: 1400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .pdp_info {
        width: 100%;
        max-width: 1400px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        grid-gap: 80px;
        gap: 80px;

        .pdp_img_box {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;

            .pdp_img {
                height: auto;
                width: 100%;
            }
        }

        .pdp_data {
            flex-grow: 1;

            .pdp_title {
                font-size: 30px;
                font-weight: 800;
                letter-spacing: -0.27px;
                line-height: 34px;
            }

            .pdp-content__summary {
                font-size: 22px;
                font-style: normal;
                font-weight: 800;
                letter-spacing: -0.27px;
                line-height: 30px;
                margin-top: 30px;
            }

            .pdp-content__rating {
                margin-top: 18px;

                ::v-deep .el-rate__icon {
                    font-size: 24px !important;
                }
            }

            .pdp-content__description {
                font-size: 18px;
                font-style: normal;
                font-weight: 500;
                letter-spacing: -0.27px;
                line-height: 22px;
                margin-top: 25px;
            }

            .pdp-content__btn {
                margin-top: 50px;
                background-color: #809e2c;
                color: white;
                border: none;
                font-weight: 700;
                font-size: 18px;
                padding: 16px 20px;
                border-radius: 34px;
                cursor: pointer;
                transition: background-color 0.3s ease;
                width: 300px;
            }

            .pdp-content__btn:hover {
                background-color: #6a8324;
            }

            .pdp-content__checklist-items {
                display: flex;
                flex-direction: column;
                grid-gap: 16px;
                gap: 16px;
                margin-top: 30px;

                .pdp-content__checklist-item {
                    align-items: center;
                    display: flex;
                    justify-content: flex-start;
                    grid-gap: 10px;
                    gap: 10px;
                    font-size: 17px;
                    font-style: normal;
                    font-weight: 500;

                    .pdp-content__checklist-icon {
                        height: auto;
                        width: 40px;
                    }
                }
            }
        }
    }

    .pdp_actions {
        width: 100%;
        max-width: 880px;
        margin-top: 20px;

        ::v-deep .el-collapse-item__header {
            background: #f7f8f9;
            height: 60px;
            font-size: 24px;
        }

        ::v-deep .el-collapse-item__wrap {
            background: #f7f8f9;
        }

        .pdp-content__benefits {
            font-size: 18px;
            color: #000;
        }
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.description {
    width: 100%;
    // max-width: 1400px;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-in-out;

    .content {
        width: 100%;
        max-width: 1400px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .description_title {
            font-size: 30px;
            font-weight: 800;
            line-height: 50px;
            color: #809e2c;
            text-align: center;
        }

        .description_content {
            font-size: 18px;
            font-weight: 500;
            line-height: 22px;
            color: #000000;
            margin-top: 20px;
        }
    }
}

.page-Supports {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 245px;
    background: rgb(39, 70, 58);

    .Supports_title {
        color: #d2e38f;
        text-align: center;
        font-family: var(--font-body-family);
        font-size: 44.4px;
        font-style: normal;
        font-weight: 500;
        line-height: 44.44px;
        letter-spacing: -0.27px;
        padding: 14px 10px 15px 10px;
    }

    .Supports_content {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: #fff;
        font-weight: 800;

        .Supports_img {
            width: 68px;
            height: 68px;
        }
    }
}

.page-products {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 345px;
    padding: 80px 0;

    .products_title {
        font-size: 40px;
        line-height: 50px;
        font-weight: 800;
    }

    .product-other {
        width: 100%;
        max-width: 1400px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 100px;

        .productother_title {
            max-width: 1000px;
            margin-left: auto;
            margin-right: auto;
            font-size: 40px;
            font-weight: 600;
            line-height: 50px;
            color: #000000;
            text-align: center;
        }

        .product_info {
            color: #000000;
            font-size: 18px;
            margin-top: 20px;
        }

        .product-other__list {
            width: 100%;
            max-width: 1400px;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            gap: 30px;
            margin-top: 40px;

            .product-item {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                padding: 40px 30px;
                box-sizing: border-box;

                .product-img {
                    max-height: 100px;
                    width: auto;
                    padding: 0;
                    margin-bottom: 20px;
                }

                .product-name {
                    font-size: 18px;
                    line-height: 22px;
                    font-weight: 800;
                    margin-bottom: 2%;
                }

                .product-description {
                    font-weight: 500;
                    font-size: 15px;
                    text-align: left;
                    line-height: 22px;
                    width: 265px;
                    max-width: 100%;
                    margin: auto;
                }

                .product-btn {
                    max-width: 256px;
                    padding: 18px 10px;
                    width: 100%;
                    font-size: 18px;
                    background-color: #d2e38f;
                    color: #27463a;
                    border: 1px solid #d2e38f;
                    transition: all 0.2s ease-in-out;
                    margin-top: 30px;
                    border-radius: 30px;
                    text-align: center;
                    font-weight: 500;
                    cursor: pointer;
                }

                .product-btn:hover {
                    background-color: #f7f8f9;
                    border: 1px solid #d8d8d8;
                    transition: all 0.2s ease-in-out;
                }
            }
        }
    }
}

.page-years {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 245px;
    background: #7fa76e;

    .years_img {
        max-width: 700px;
        width: 100%;
        margin: 0 auto;
    }

    .years_content {
        color: #fff;
        margin: 31px auto 0 auto;
        padding: 0 10px;
    }
}
</style>
